<template>
	<view>
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 车辆加油
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80"
						:model="info"
						:rules="rules"
						ref="form1">
							<u-form-item label="加油人" prop="userName" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="油卡"
							prop="cardNo"
							required
							@click="pickShow = true;columns = cards;pickField = 'oilCardId';pickFieldName='cardNo'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.cardNo"
								placeholder="请选择"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<!-- <u-form-item
							label="油卡余额"
							prop="balance"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.balance"
								placeholder="系统自动填入"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item> -->
							<u-form-item
							label="车牌号"
							prop="carNum"
							required
							@click="pickShow = true;columns = carNumbers;pickField = 'carId';pickFieldName='carNum'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.carNum"
								placeholder="请选择"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item label="加油金额" prop="amount" required borderBottom>
								<u--input
								v-model="info.amount"
								placeholder="请输入"
								type="digit"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="加油日期"
							prop="time"
							required
							@click="dateShow = true;dateField = 'time'">
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.time"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<!-- <u-form-item label="加油地点" prop="cfPlace" required>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.cfPlace"
								placeholder="正在定位中..."
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item> -->
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button">
			<view class="submit-block" @click="submit()">
				保存
			</view>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
		
		<!-- <u-datetime-picker
			:show="dateShow"
			v-model="dateValue"
			@cancel="dateShow = false"
			@confirm="confirmDate"
			mode="date">
		</u-datetime-picker> -->
		
		<u-calendar
			:show="dateShow"
			:maxDate="String(new Date())"
			:minDate="minDate"
			monthNum="7"
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			@confirm="confirmDate">
		</u-calendar>
	</view>
</template>

<script>
	import { getCarNums } from '@/api/car.js'
	import { getCads, add } from '@/api/oill.js'
	import { strFormatMinutes } from '@/utils/format.js'
	export default {
		data() {
			return {
				minDate:new Date() - 6*30*24*60*60*1000,
				timer:null,//定时器
				info:{
					cardNo:'',
					oilCardId:'',
					carNum:'',
					carId:'',
					time:'',
					amount:'',
				},
				rules:{
					'cardNo': {
						required: true,
						message: '请选择油卡',
						trigger: ['blur', 'change']
					},
					'carNum': {
						required: true,
						message: '请选择车牌号',
						trigger: ['blur', 'change']
					},
					'time': {
						type: 'string',
						required: true,
						message: '加油时间不能为空',
						trigger: ['blur', 'change']
					},
					'amount': [
						{
							type: 'number',
							required: true,
							message: '请输入加油金额',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return value > 0 && value < 10000;
							},
							message: '加油金额为正数且不超过万'
						},
					],
				},
				carNumbers:[],
				cards:[],
				pickShow:false,
				columns:[],
				pickField:'',
				pickFieldName:'',
				dateShow:false,
				dateField:'',
			}
		},
		onLoad() {
			let loginInfo = uni.getStorageSync("loginInfo")
			this.info.userName = loginInfo.user.userName
			// this.getAddress()
			this.getCarNumList()
			this.getCardList()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		onShow() {
			// clearInterval(this.timer)
			// this.timer = setInterval(()=>{
			//     this.getAddress();
			// },30000);
		},
		onUnload(){
		    // clearInterval(this.timer)
		},
		methods: {
			getAddress(){
			    uni.getLocation({
			        type: 'gcj02',
					geocode: true,
					isHighAccuracy:true,
			        success:(res) => {
			            // this.address = res.address.city+'·'+res.address.district+res.address.street+res.address.streetNum+res.address.poiName;
						this.info.cfPlace = res.address.city+res.address.district+res.address.poiName;
			        }
			    });
			},
			async getCardList(){
				const { data } = await getCads();
				if(data.code == 200){
					this.cards = [data.data]
				}
			},
			async getCarNumList(){
				const { data } = await getCarNums();
				if(data.code == 200){
					this.carNumbers = [data.data]
				}
			},
			async addOill(){
				const { data } = await add(this.info);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			submit(){
				this.$refs.form1.validate().then(res => {
					this.addOill()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			radioChange(){
				
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].id
				this.info[this.pickFieldName] = e.value[0].name
				if(this.pickFieldName === 'cardNo'){
					this.info.balance = e.value[0].balance
				}
			},
			confirmDate(e){
				// this.info[this.dateField] = strFormatMinutes(e.value)
				this.info[this.dateField] = e[0]
				this.dateShow = false
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.submit{
		background-color: #0081FF;
		color: #f6f6f6;
		height: 100rpx;
		text-align: center;
	}

</style>